import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/routes/xin_he_routes.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import 'xin_he_seller_management_logic.dart';

class XinHeSellerManagementPage extends StatelessWidget {
  XinHeSellerManagementPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeSellerManagementLogic());
  final state = Get.find<XinHeSellerManagementLogic>().state;
  List<Color> gradientColors = [
    XinHeColor('#DAFEFE'),
    XinHeColor('#FAFFFF'),

  ];

  List bottomTitleList = [ '0时','4时','8时','12时','16时','20时','24时'];
  List<double> get yValues => const [1.3, 1, 1.8, 1.5, 2.2, 1.8, 3];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Obx(() =>  Stack(children: [
        ///背景层
        Column(children: [
          ///header_    bg
          Container(
            height: Get.mediaQuery.padding.top+44+115+27.5,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      XinHeColor('#00DDDD'),
                      XinHeColor('#D9FFFF'),
                    ])),
          ),


        ],),

        ///内容层
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: Get.mediaQuery.padding.top,),
            ///导航栏
            Container(
              alignment: Alignment.centerLeft,
              height: 44,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: (){
                      Get.back();
                    },
                    child: Container(
                      height: 44,
                      width: 40,
                      color: Colors.transparent,
                      alignment: Alignment.center,
                      child: const XinHeAssetImage(
                        'assets/images/home/app_back_3.png',
                        width: 9.5,
                        height: 17,
                        fit: BoxFit.cover,),
                    ),
                  ),
                  Text('商家管理',style: TextStyle(color: XinHeColor('#333333'),fontSize:17,fontWeight: FontWeight.w600 ),),
                  Container(width: 40,),

                ],),
            ),

            ///交易统计
            Container(
              padding: EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
              margin: EdgeInsets.symmetric(horizontal: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),),
              child: Column(children: [

                ///
                SizedBox(height: 25,
                  child: Row(children: [
                    Text('交易统计',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14,fontWeight: FontWeight.w600),),
                    Spacer(),
                    Container(
                      height: 25,
                      width: 186+1,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12.5),border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          GestureDetector(
                            onTap: (){
                              state.statisticIndex.value = 0;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color:state.statisticIndex.value == 0? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('今日',style: TextStyle(color:state.statisticIndex.value == 0? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              state.statisticIndex.value = 1;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color: state.statisticIndex.value == 1? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('昨日',style: TextStyle(color: state.statisticIndex.value == 1? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              state.statisticIndex.value = 2;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color:state.statisticIndex.value == 2? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('7日',style: TextStyle(color: state.statisticIndex.value == 2? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                        ],),),


                  ],),
                ),

                Container(
                  height: 75,
                  width: Get.width-60,
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [

                    SizedBox(
                      width: (Get.width-60)/3.0,
                      height: 75,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(state.statisticList[0],style: TextStyle(color: XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                          SizedBox(height: 5,),

                          Text('6000.00',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14),),

                        ],),
                    ),


                    SizedBox(
                      width: (Get.width-60)/3.0,
                      height: 75,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(state.statisticList[1],style: TextStyle(color: XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                          SizedBox(height: 5,),
                          Text('15',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14),),

                        ],),
                    ),


                    SizedBox(
                      width: (Get.width-60)/3.0,
                      height: 75,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(state.statisticList[2],style: TextStyle(color: XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                          SizedBox(height: 5,),
                          Text('60',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14),),

                        ],),
                    ),


                  ],),
                )



              ],),

            ),

            const SizedBox(height: 10,),
            ///商家订单 我的收益
            Container(
              height: 94,
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              margin: const EdgeInsets.symmetric(horizontal: 15),
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                GestureDetector(
                  onTap:(){
                    Get.toNamed(XinHeRoutes.sellerOrders);
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                    const XinHeAssetImage('assets/images/mine/seller_order.png',width: 35,height: 35,),
                    const SizedBox(height: 3,),
                    Text('商家订单',style: TextStyle(color: XinHeColor('#2B3131'),fontSize:12 ,fontWeight: FontWeight.w500),)
                  ],),
                ),
                  GestureDetector(
                    onTap:(){
                      Get.toNamed(XinHeRoutes.sellerMyProfits);

                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      const XinHeAssetImage('assets/images/mine/my_profit.png',width: 35,height: 35,),
                        const SizedBox(height: 3,),
                        Text('我的收益',style: TextStyle(color: XinHeColor('#2B3131'),fontSize:12 ,fontWeight: FontWeight.w500),)
                    ],),
                  ),
                  GestureDetector(
                    onTap: (){
                      Get.toNamed(XinHeRoutes.sellerMember);
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                      const XinHeAssetImage('assets/images/mine/seller_memner.png',width: 35,height: 35,),
                        const SizedBox(height: 3,),
                        Text('商家会员',style: TextStyle(color: XinHeColor('#2B3131'),fontSize:12 ,fontWeight: FontWeight.w500),)
                    ],),
                  )
              ],),
            ),

            ///销售统计
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
              margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 10),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),),
              child: Column(children: [

                ///title  tabs
                SizedBox(height: 25,
                  child: Row(children: [
                    Text('销售统计',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14,fontWeight: FontWeight.w600),),
                    Spacer(),
                    Container(
                      height: 25,
                      width: 186+1,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12.5),border: Border.all(color: XinHeStyle.mainGreenColor,width: 0.5)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          GestureDetector(
                            onTap: (){
                              state.sellStatisticIndex.value = 0;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color:state.sellStatisticIndex.value == 0? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('今日',style: TextStyle(color:state.sellStatisticIndex.value == 0? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              state.sellStatisticIndex.value = 1;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color: state.sellStatisticIndex.value == 1? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('昨日',style: TextStyle(color: state.sellStatisticIndex.value == 1? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              state.sellStatisticIndex.value = 2;
                            },
                            child: Container(
                              width: 62,
                              height: 25,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(color:state.sellStatisticIndex.value == 2? XinHeStyle.mainGreenColor:Colors.transparent,borderRadius: BorderRadius.circular(12.5)),
                              child: Text('7日',style: TextStyle(color: state.sellStatisticIndex.value == 2? Colors.white:XinHeColor('#9CA1A2'),fontSize: 12,fontWeight: FontWeight.w500),),
                            ),
                          ),
                        ],),),


                  ],),
                ),
                SizedBox(height: 30,),

                SizedBox(width: Get.width-30,height: 200,child: LineChart(mainData()),),
                SizedBox(height: 15,)

              ],),

            ),


          ],)

      ],)),
    );
  }


  LineChartData mainData() {

    return LineChartData(
      lineTouchData:  LineTouchData(
          getTouchedSpotIndicator: (barData, spotIndexs){
            return spotIndexs.map((spotIndex){
              final spot = barData.spots[spotIndex];
              // if(spot.x == 0 || spot.x == bottomTitleList.length-1){
              //   return null;
              // }
              return TouchedSpotIndicatorData(
                  FlLine(color: Colors.transparent,strokeWidth: 4),
                  FlDotData(getDotPainter: (spot, percent, barData, index){
                    return FlDotCirclePainter(radius: 4,color:XinHeStyle.mainGreenColor ,strokeWidth: 5,strokeColor: Colors.white
                    );})
              );
            }).toList();
         },
        touchTooltipData: LineTouchTooltipData(
          tooltipBgColor: XinHeColor('#646E6E'),
          getTooltipItems: (List<LineBarSpot>touchedBarSpots){
            return touchedBarSpots.map((barSpot){
              final spot = barSpot;
              // if(spot.x == 0 || spot.x == bottomTitleList.length-1){
              //   return null;
              // }

              return LineTooltipItem(
                  '${bottomTitleList[spot.x.toInt()] }\n',
                  TextStyle(color: Colors.white,fontWeight: FontWeight.w500,fontSize: 9),
                children: [

                   TextSpan(
                    text: '销售额：${spot.y}',
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ]
              );

            } ).toList();
          }
        )
      ),

      gridData: FlGridData(
        show: true,
        drawVerticalLine: false,
        horizontalInterval: 1,
        verticalInterval: 1,
        getDrawingHorizontalLine: (value) {
          return  FlLine(
            color: XinHeColor('#EAEEEF'),
            strokeWidth: 0.5,
          );
        },
        // getDrawingVerticalLine: (value) {
        //   return const FlLine(
        //     color: AppColors.mainGridLineColor,
        //     strokeWidth: 1,
        //   );
        // },
      ),
      titlesData: FlTitlesData(
        show: true,
        rightTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        topTitles: const AxisTitles(
          sideTitles: SideTitles(showTitles: false),
        ),
        bottomTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 30,
            interval: 1,
            getTitlesWidget: bottomTitleWidgets,
          ),
        ),
        leftTitles: AxisTitles(
          sideTitles: SideTitles(
            showTitles: true,
            interval: 1,
            getTitlesWidget: leftTitleWidgets,
            reservedSize: 42,
          ),
        ),
      ),
      borderData: FlBorderData(
        show: true,
        border: Border(bottom: BorderSide(color:XinHeColor('#EAEEEF'),width: 0.5 ),
            left: BorderSide(color:XinHeColor('#EAEEEF'),width: 0.5 )),
      ),
      minX: 0,
      maxX: (bottomTitleList.length-1).toDouble(),
      minY: 0,
      maxY: 7,
      clipData: FlClipData.all(),
      lineBarsData: [
        LineChartBarData(
          spots: yValues.asMap().entries.map((e){
            return FlSpot(e.key.toDouble(), e.value);
          }).toList(),
          isCurved: true,
          color: XinHeStyle.mainGreenColor,
          barWidth: 2,
          isStrokeCapRound: true,
          dotData: const FlDotData(
            show: false,
          ),
          belowBarData: BarAreaData(
            show: true,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: gradientColors
                  .map((color) => color.withOpacity(1))
                  .toList(),
            ),
          ),
        ),
      ],
    );
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    var style = TextStyle(
      fontWeight: FontWeight.w500,
      fontSize: 11,
      color: XinHeColor('#9CA1A2')
    );
    Widget text;
    text =  Text(bottomTitleList[value.toInt()], style: style);

    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }

  Widget leftTitleWidgets(double value, TitleMeta meta) {
    var style = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 11,
         color: XinHeColor('#9CA1A2')
    );
    String text;
    switch (value.toInt()) {
      case 1:
        text = '500';
        break;
      case 2:
        text = '1000';
        break;
      case 3:
        text = '1500';
        break;
      case 4:
        text = '2000';
        break;

      case 5:
        text = '2500';
        break;

        case 6:
      text = '3000';
      break;

      case 7:
      text = '3500';
      break;


      default:
        return Container();
    }

    return Text(text, style: style, textAlign: TextAlign.left);
  }


}
